<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生基本信息管理</title>
    <script src="../sys/vue.js"></script>
    <script src="../sys/jquery.min.js"></script>

    <style>
        table#stu{
            width: 100%;
            height: 100%;;
            align-content:center;           
            border: 2px solid black;
        }
        table#stu tr{
            height: 50px;
        }
        table#stu tr td{
            border: 1px solid #877777;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 style="color:brown; text-align: center;">学生基本信息管理</h2>
        <hr width="100%" />
        <br />

        学号：<input style="width:100px;" v-model="sno" type="text" value="" />
        姓名：<input style="width:50px;"  v-model="name" type="text" value="" />
        性别：<select v-model="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>   
            </select>
        生日：<input style="width:60px;"  v-model="birth" type="text" value="" />
        班级：<select v-model="iclass">
                <option value="信息20-1班">信息20-1班</option>
                <option value="信息20-2班">信息20-2班</option>   
            </select>
        住所：<input style="width:100px;"  v-model="address" type="text" value="" />
        <input type="button" @click="addStu()" v-model="add_save" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input id="txtsearch" v-model="sValue" type="text" />
        <input type="button" @click="searchStu()" value="搜索" /><br />
        <input type="button" onclick="getStus()" value="获取数据" />
        <input type="button" onclick="searchStus()" value="查询姓王数据" />

        <br /><br />
        <table id="stu" cellpadding="0" cellspacing="0">
            <tr>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出身年月日</td>
                <td>班级</td>
                <td>宿舍位置</td>
                <td>操作</td>
            </tr>            
            <tr v-for="(stu, i) in arrStu" :key="stu.sno">
                <td>{{i+1}}</td>
                <td>{{stu.sno}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.birth}}</td>
                <td>{{stu.iclass}}</td>
                <td>{{stu.address}}</td>
                <td>
                    <input type="button" @click="delStu(stu.sno)" value="删除" />
                    <input type="button" @click="modStu(stu.sno)" value="修改" />
                </td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arrStu : [],//通过ajax从后台获取
                sno:"",
                name:"",
                sex:"男",
                birth:"",
                iclass:"信息20-1班",
                address:"",
                sValue:"",
                add_save:"新增"
            },
            methods: {
                addStu() {
                    var s = {
                        xh:this.arrStu.length + 1,
                        sno:this.sno,
                        name:this.name,
                        sex:this.sex,
                        birth:this.birth,
                        iclass:this.iclass,
                        address:this.address
                    };
                    this.arrStu.push(s);
                },
                delStu(_no){
                    for(var i=0; i<this.arrStu.length;i++){
                        if(this.arrStu[i].sno==_no){
                            this.arrStu.splice(i,1);
                            break;
                        }
                    }
                },
                modStu(_no){
                    var stu=null;
                    for(var i=0; i<this.arrStu.length;i++){
                        if(this.arrStu[i].sno==_no){    
                            stu =   this.arrStu[i];                      
                            break;
                        }
                    }
                    this.add_save = "保存";
                    this.xh=this.arrStu.length + 1;
                    this.sno=stu.sno;
                    this.name=stu.name;
                    this.sex=stu.sex;
                    this.birth=stu.birth;
                    this.iclass=stu.iclass;
                    this.address=stu.address;
                },
                searchStu(){
                }    
            },  
        });
        
        function getStus(){           
            $.get('../getstus', function(data) {
                vm.$data.arrStu = eval(data);
            });        
        }       
        function searchStus(){           
            $.get('../searchstus?s=王', function(data) {
                vm.$data.arrStu = eval(data);
            });        
        } 
    </script>
</body>
</html>